<template>
  <div class="participant-manager">
    <!-- 查询表单 -->
    <el-form :model="queryForm" label-width="100px">
      <el-row :gutter="10">
        <!-- 批次选择 -->
        <el-col :span="6">
          <el-form-item label="批次">
            <el-select v-model="queryForm.batch" placeholder="请选择批次" clearable>
              <el-option v-for="batch in batchList" :key="batch.id" :label="batch.name" :value="batch.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="姓名">
            <el-input v-model="queryForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>

        <!-- 手机号 -->
        <el-col :span="6">
          <el-form-item label="手机号">
            <el-input v-model="queryForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-col>

        <!-- 查询按钮 -->
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="searchParticipants">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 参测人员Table -->
    <el-table :data="participantData" style="width: 100%">
      <el-table-column label="序号" width="80">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="100">
        <template #default="{ row }">
          {{ row.gender === 'M' ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column prop="birthdate" label="出生日期" width="150"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'danger'">
            {{ row.status === 1 ? '正常' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button @click="openEditDialog(row)" type="text" size="small">修改</el-button>
          <el-button @click="deleteParticipant(row)" type="text" size="small" style="color: red;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20,50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px;">
    </el-pagination>

    <!-- 修改模态框 -->
    <el-dialog title="修改参测人员信息" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="currentParticipant" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="currentParticipant.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="currentParticipant.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="currentParticipant.gender">
            <el-radio label="M">男</el-radio>
            <el-radio label="F">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker v-model="currentParticipant.birthdate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateParticipant">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getParticipants, deleteParticipant, updateParticipant, getBatchList } from '@/api/system/testPer'; // 引入新的API方法

export default {
  data() {
    return {
      queryForm: {
        batch: '',  // 选中的批次ID
        name: '',   // 查询姓名
        phone: ''   // 查询手机号
      },
      batchList: [],       // 批次列表数据
      participantData: [], // 参测人员数据
      total: 0,            // 总数据条数
      currentPage: 1,      // 当前页码
      pageSize: 5,         // 每页条数
      editDialogVisible: false,  // 控制修改模态框显示
      currentParticipant: {},    // 当前正在编辑的参测人员信息
    };
  },
  created() {
    this.fetchBatchList();  // 获取批次列表
    this.queryForm.batch = this.$route.query.batchId || '';
    this.searchParticipants();  // 获取参测人员数据
  },
  methods: {
    // 获取批次列表
    fetchBatchList() {
      getBatchList()
          .then(response => {
            this.batchList = response.data;
          })
          .catch(error => {
            console.error('获取批次列表失败:', error);
          });
    },

    // 查询或获取全部参测人员
    searchParticipants() {
      const params = {
        batch: this.queryForm.batch || null,
        name: this.queryForm.name || null,
        phone: this.queryForm.phone || null,
        page: this.currentPage,
        size: this.pageSize
      };

      getParticipants(params)
          .then(response => {
            this.participantData = response.data.records;
            this.total = response.data.total;
          })
          .catch(error => {
            console.error('获取参测人员数据失败:', error);
          });
    },

    // 重置查询表单
    resetQuery() {
      this.queryForm = { batch: '', name: '', phone: '' };
      this.searchParticipants();
    },

    // 分页事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.searchParticipants();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchParticipants();
    },

    // 打开修改模态框
    openEditDialog(participant) {
      this.currentParticipant = { ...participant };  // 克隆数据，防止修改原数据
      this.editDialogVisible = true;
    },

    // 更新参测人员信息
    updateParticipant() {
      updateParticipant(this.currentParticipant)
          .then(() => {
            this.$message.success('修改成功');
            this.editDialogVisible = false;
            this.searchParticipants();  // 刷新参测人员列表
          })
          .catch(error => {
            console.error('修改失败:', error);
            this.$message.error('修改失败');
          });
    },

    // 删除参测人员
    deleteParticipant(participant) {
      this.$confirm('确定删除该参测人员吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteParticipant(participant)
            .then(() => {
              this.$message.success('删除成功');
              this.searchParticipants(); // 刷新参测人员列表
            })
            .catch(error => {
              console.error('删除参测人员失败:', error);
              this.$message.error('删除失败');
            });
      });
    }
  }
};
</script>
